<p>垂直菜单可以方便的为您的应用创建可折叠的菜单。</p>
<h3>实例</h3>
<div class="example" contenteditable="false">
  <nav class="menu" data-toggle="menu" style="width: 200px">
    <button class="btn btn-primary">CREATE</button> <button class="btn">
    UPLOAD</button>
    <ul class="nav nav-primary">
      <li>
        <a href="###">Dashboard</a>
      </li>
      <li>
        <a href="###">Me</a>
      </li>
      <li>
        <a href="###">Time</a>
        <ul class="nav">
          <li>
            <a href="###">Today</a>
          </li>
          <li>
            <a href="###">Tomarrow</a>
          </li>
          <li>
            <a href="###">Yestorday</a>
          </li>
          <li>
            <a href="###">This Week</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="###">Trash</a>
      </li>
      <li>
        <a href="###">All</a>
      </li>
      <li class="active show">
        <a href="###">Status</a>
        <ul class="nav">
          <li>
            <a href="###">Ready</a>
          </li>
          <li class="active">
            <a href="###">Ongoing</a>
          </li>
          <li>
            <a href="###">Completed</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
<pre class="prettyprint">
<code>&lt;nav class=&quot;menu&quot; data-toggle=&quot;menu&quot; style=&quot;width: 200px&quot;&gt;
  &lt;button class=&quot;btn btn-primary&quot;&gt;&lt;i class=&quot;icon-edit&quot;&gt;&lt;/i&gt; CREATE&lt;/button&gt;
  &lt;button class=&quot;btn&quot;&gt;&lt;i class=&quot;icon-cloud-upload&quot;&gt;&lt;/i&gt; UPLOAD&lt;/button&gt;
  &lt;ul class=&quot;nav nav-primary&quot;&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-th&quot;&gt;&lt;/i&gt; Dashboard&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt; Me&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-time&quot;&gt;&lt;/i&gt; Time&lt;/a&gt;
      &lt;ul class=&quot;nav&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Today&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tomarrow&lt;/a&gt;&lt;/li&gt;
        ...
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-list-ul&quot;&gt;&lt;/i&gt; All&lt;/a&gt;&lt;/li&gt;
    ...
    &lt;li class=&quot;active show&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt; Status&lt;/a&gt;
      &lt;ul class=&quot;nav&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-circle-blank&quot;&gt;&lt;/i&gt; Ready&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-play-sign&quot;&gt;&lt;/i&gt; Ongoing&lt;/a&gt;&lt;/li&gt;
        ...
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;</code>
</pre>
